<template>
  <div class="app-container">
    <div class="main">
      <div style="display: flex; justify-content: space-between">
        <el-button type="primary" icon="el-icon-plus" @click="addRule" size="small">
          新建规则
        </el-button>
        <el-button v-show="rules.length > 0" type="primary" icon="el-icon-check" @click="save" size="small">
          保存规则
        </el-button>
      </div>
      <div v-for="(rule, index) in rules" :key="index" style="margin: 10px 0">
        <el-card>
          <div slot="header" style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
              <span v-if="!edit" style="font-size: 14px">{{ rule.name }}</span>
              <el-input v-else size="mini" v-model="rule.name"/>
              <el-button style="margin-left: 5px" type="text" :icon="edit ? 'el-icon-check' : 'el-icon-edit'"
                         @click="editTitle"/>
            </div>
            <div>
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="addCondition(index)">
                添加条件
              </el-button>
              <el-button type="danger" size="mini" icon="el-icon-close" @click="removeRule(index)">移除规则
              </el-button>
            </div>
          </div>
          <div v-if="rule.conditions.length > 0">
            <el-timeline style="margin-left: -25px">
              <el-timeline-item>
                <div class="rule-title">当</div>
                <div v-for="(c, cIndex) in rule.conditions" :key="cIndex">
                  <div class="area">
                    <div class="seat" @click="openDialog(1, index, cIndex)">
                      {{ c.name ? c.name : '请选择条件' }}
                    </div>
                    <div class="seat" style="margin: 0 5px" disabled>
                      <span @click="openDialog(2, index, cIndex)">
                        {{ c.symbol ? c.symbol.name : '请选择符号' }}
                      </span>
                    </div>
                    <div class="seat" @click="openDialog(3, index, cIndex)" :disabled="!c.symbol">
                      {{ c.field ? c.field.name : '请选择条件属性' }}
                    </div>
                    <el-button v-show="c.symbol && (c.symbol.value === 'contains' || c.symbol.value === 'not contains')" style="margin-left: 5px;" type="text" icon="el-icon-plus"/>
                  </div>
                  <div v-if="c.nextStep">
                    <div class="rule-title" style="display: flex; align-items: center">
                      <div>
                        <el-button type="text" @click="changeStep(c)">
                          {{ c.nextStep === 'and' ? '并且' : '或者' }}
                        </el-button>
                      </div>
                      <div>
                        <el-button style="margin-left: 5px; color: red" type="text" icon="el-icon-delete"
                                   @click="removeCondition(rule, cIndex)"/>
                      </div>
                    </div>
                  </div>
                </div>
              </el-timeline-item>
              <el-timeline-item v-if="rule.events">
                <div class="rule-title">然后</div>
                <div class="area">
                  <div class="seat" @click="openDialog(4, index, null)">
                    {{ rule.event ? rule.event.name : '请选择事件' }}
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div v-else>
            <el-empty :image-size="70" description="暂无条件，请添加条件"></el-empty>
          </div>
        </el-card>
      </div>
      <el-empty v-show="rules.length === 0" description="暂无规则，请创建规则"/>
    </div>

    <el-dialog :visible.sync="open" :title="title" width="450px">
      <div class="components">
        <div v-if="openType === 1" v-for="(c,i) in conditions" :key="i" @click="selectCondition(c)">
          <component-index :info="c" :type="1"/>
        </div>
        <div v-if="openType === 2" v-for="(s,i) in checkedComponent.symbols" :key="i" @click="selectConditionSymbol(s)">
          <component-index :info="s" :type="2"/>
        </div>
        <div v-if="openType === 3 && rules[openRuleIndex].conditions[openConditionIndex].symbol.value !== 'contains'"
             v-for="(f,i) in checkedComponent.fields" :key="i" @click="selectConditionField(f)">
          <component-index :info="f" :type="3"/>
        </div>
        <div v-if="openType === 4" v-for="(e,i) in events" :key="i" @click="selectEvent(e)">
          <component-index :info="e" :type="4"/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import componentIndex from "./components/index"

export default {
  name: 'index',
  components: {
    componentIndex
  },
  data() {
    return {
      open: false,
      openType: null,
      openRuleIndex: 0,
      openConditionIndex: 0,
      title: '',
      loading: false,
      edit: false,
      checkedComponent: {},
      
      conditions: [{
        name: '培训课程状态',
        value: 'status',
        fields: [{
          type: 'value',
          name: '待处理',
          value: '30'
        }, {
          type: 'value',
          name: '进行中',
          value: '30'
        }, {
          type: 'value',
          name: '已完成',
          value: '40'
        }],
        symbols: [{
          name: '等于',
          value: '=='
        }, {
          name: '包含',
          value: 'contains'
        }, {
          name: '不包含',
          value: 'not contains'
        }]
      }, {
        name: '已完成课程',
        value: 'project',
        fields: [{
          type: 'value',
          name: '第一节',
          value: '1'
        }, {
          type: 'value',
          name: '第二节',
          value: '2'
        }, {
          type: 'value',
          name: '第三节',
          value: '3'
        }, {
          type: 'value',
          name: '第四节',
          value: '4'
        }, {
          type: 'value',
          name: '第五节',
          value: '5'
        }, {
          type: 'value',
          name: '第六节',
          value: '6'
        }],
        symbols: [{
          name: '包含',
          value: 'contains'
        }]
      }, {
        name: '完成课程数量',
        value: "projectNum",
        fields: [{
          type: 'num_input',
          name: '数字输入框',
          value: '0'
        }],
        symbols: [{
          name: '大于',
          value: 'contains'
        }, {
          name: '大于等于',
          value: 'not contains'
        }]
      }],
      events: [{
        name: '创建考试任务',
        value: 'service.createTask()'
      }],
      rules: []
    }
  },
  created() {
  },
  methods: {
    editTitle() {
      this.edit = !this.edit
    },
    selectCondition(c) {
      this.checkedComponent = c
      this.rules[this.openRuleIndex].conditions[this.openConditionIndex].name = c.name
      this.rules[this.openRuleIndex].conditions[this.openConditionIndex].value = c.value
      this.$forceUpdate()
      this.open = false
    },
    selectConditionSymbol(s) {
      this.rules[this.openRuleIndex].conditions[this.openConditionIndex].symbol = s
      this.$forceUpdate()
      this.open = false
    },
    selectConditionField(f) {
      this.rules[this.openRuleIndex].conditions[this.openConditionIndex].fields = [f]
      this.$forceUpdate()
      this.open = false
    },
    selectEvent(e) {
      this.rules[this.openRuleIndex].event = e
      this.$forceUpdate()
      this.open = false
    },
    addRule() {
      this.rules.push({
        name: '规则',
        conditions: [],
        events: []
      })
    },
    removeRule(i) {
      this.rules.splice(i, 1)
    },
    addCondition(index) {
      const len = this.rules[index].conditions.length
      if (len > 0) {
        this.rules[index].conditions[len - 1].nextStep = 'and'
      }
      this.rules[index].conditions.push({})
      this.rules[index].events.push({})
    },
    changeStep(c) {
      c.nextStep = c.nextStep === 'and' ? 'or' : 'and'
      this.$forceUpdate()
    },
    removeCondition(rule, cIndex) {
      rule.conditions.splice(cIndex - 1, 1)
      rule.conditions[cIndex].nextStep = ''
    },
    openDialog(type, index, cIndex) {
      if (type === 1) {
        this.title = '条件选择'
      }
      if (type === 2) {
        if (Object.keys(this.rules[index].conditions[cIndex]).length === 0) {
          this.$message({
            type: 'warning',
            message: '请先选择条件'
          })
          return
        }
        this.title = '符号选择'
      }
      if (type === 3) {
        if (Object.keys(this.rules[index].conditions[cIndex]).length === 0) {
          this.$message({
            type: 'warning',
            message: '请先选择条件'
          })
          return
        }
        if (!this.rules[index].conditions[cIndex].symbol) {
          this.$message({
            type: 'warning',
            message: '请先选择符号'
          })
          return
        }
        this.title = '条件属性选择'
      }
      if (type === 4) {
        this.title = '事件选择'
      }
      this.openRuleIndex = index
      this.openConditionIndex = cIndex
      this.openType = type
      this.open = true
    },
    save() {
      console.log("save", this.rules)
    }
  }
}
</script>

<style scoped>
.app-container {
  background-color: #F4F5F5;
  height: 90vh;
  display: flex;
  justify-content: center;
}

.main {
  width: 50%;
  max-height: 100%;
  overflow-y: auto;
  background-color: white;
  padding: 20px;
}

.components {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rule-title {
  font-size: 14px;
  color: rgba(51, 48, 48, 0.84);
}

.area {
  width: 100%;
  height: 50px;
  background-color: #F4F5F5;
  margin: 10px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.seat {
  height: 50%;
  background-color: #bdadad;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f0f0f0;
  border-radius: 5px;
  padding: 0 10px;
  transition: 200ms;
  cursor: pointer;
}

.seat:active {
  transform: scale(0.95);
}
</style>
